<script setup lang="ts">
	import { ref, unref, computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { route } from '@/uni_modules/uview-plus'
	import { useNotify } from '@/hooks/web/useNotify/index.js'
	import { orderList, payOwe } from '@/package_dealer/api/Home'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	interface RouteParams {
		id : string,
		name : string,
		receive_money : string
	}
	const routeParams = ref<RouteParams>({
		id: '',
		name: '',
		receive_money: ''
	})
	onLoad((options) => {
		routeParams.value = options as RouteParams
		getDetail()
	})
	const useGetDetail = () => {
		const detailInfo = ref({})
		const deatailList = ref([])

		const getDetail = async () => {
			const params = {
				store_id: unref(routeParams).id
			}
			const res = await orderList(params)
			detailInfo.value = res.data.data
			deatailList.value = detailInfo.value.list.map((val) => {
				return {
					...val,
					checked: false
				}
			})
		}

		return {
			detailInfo,
			getDetail,
			deatailList
		}
	}
	const { getDetail, detailInfo, deatailList } = useGetDetail()

	const selectedIds = ref([])

	// // 创建一个计算属性来计算选中的总金额
	const totalSelectedAmount = computed(() => {
		return deatailList.value.filter(item => item.checked) // 筛选出选中的订单
			.reduce((sum, item) => sum + Number(item.unsay_amount), 0); // 计算总金额
	});

	const handleCheckboxChange = (item, isChecked) => {
		if (isChecked) {
			// 如果复选框被选中，添加ID到数组中
			selectedIds.value.push(item.id);
			item.checked = isChecked;
		} else {
			// 如果复选框被取消选中，从数组中移除ID
			const index = selectedIds.value.indexOf(item.id);
			if (index !== -1) {
				selectedIds.value.splice(index, 1);
			}
			item.checked = isChecked;
		}
	}

	const pay_type = ref('')

	const submitLoading = ref(false)
	const submit = async () => {
		if (selectedIds.value.length == 0) {
			showNotify({
				type: 'error',
				message: '请选择订单'
			})
			return false
		}
		if (!pay_type.value) {
			showNotify({
				type: 'error',
				message: '请选择收款方式'
			})
			return false
		}
		submitLoading.value = true
		try {
			const params = {
				store_id: unref(routeParams).id,
				pay_type: pay_type.value,
				order_id: selectedIds.value.join(','),
				money: totalSelectedAmount.value
			}
			const res = await payOwe(params)
			showNotify({
				type: 'success',
				message: res.msg
			})
			setTimeout(() => {
				uni.reLaunch({
					url: `/package_dealer/pages/Home/index`
				})
			}, 1000)
		} catch (err) {
			showNotify({
				type: 'error',
				message: err.msg
			})
		} finally {
			submitLoading.value = false
		}

	}
</script>

<template>
	<view class="content">
		<view class="content-header">
			<view class="header-name">{{routeParams.name}}</view>
			<view class="header-text">欠款总额：<text
					style="font-weight: 700;color: rgba(2, 14, 36, 1);">{{detailInfo.money}}</text>
			</view>
			<view class="header-text">
				欠单数量：<text style="font-weight: 700;color: rgba(2, 14, 36, 1);">{{detailInfo.num}}</text></view>
		</view>
		<view class="content-main">
			<view class="payment-header">
				<view class="payment-name">欠单列表</view>
				<view class="payment-text">￥{{ totalSelectedAmount.toFixed(2) }}</view>
			</view>
			<view class="mian-line"></view>
			<view class="box-main">
				<view class="main-box" v-for="(item,index) in deatailList" :key="index">
					<up-row>
						<up-col span="1">
							<up-checkbox v-model="item.checked" @change="handleCheckboxChange(item, $event)"
								:customStyle="{marginBottom: '8px'}">
							</up-checkbox>
						</up-col>
						<up-col span="11">
							<view class="box-name">订单号：{{item.order_no}}</view>
							<view class="box">
								<view class="box-text">{{item.create_time}}</view>
								<view class="box-mon">￥{{item.unsay_amount}}</view>
							</view>
						</up-col>
					</up-row>
				</view>
			</view>
		</view>
		<view class="content-payment">
			<view class="payment-header">
				<view class="payment-name">收款方式</view>
			</view>
			<view class="payment-box">
				<up-radio-group v-model="pay_type" placement="column" iconPlacement="right">
					<up-radio :customStyle="{marginBottom: '8px'}" name="1" label="现金">
					</up-radio>
					<up-radio :customStyle="{marginBottom: '8px'}" name="2" label="公司账户">
					</up-radio>
				</up-radio-group>
			</view>
		</view>
		<view class="main-footer">
			<up-button text="确定" :loading="submitLoading" :disabled="submitLoading" @click="submit()"
				color="rgba(55, 131, 252, 1)"></up-button>
		</view>
		<up-notify ref="NotifyRef"></up-notify>
	</view>
</template>


<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background: rgba(242, 243, 245, 1);
		padding-top: 30rpx;
		box-sizing: border-box;

		.content-header {
			width: 702rpx;
			height: 138rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			margin: 0rpx auto;
			padding: 30rpx;
			box-sizing: border-box;

			.header-name {
				font-size: 28rpx;
				font-weight: 700;
				color: rgba(2, 14, 36, 1);
			}

			.header-text {
				display: inline-block;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(101, 103, 105, 1);
				margin-top: 20rpx;
				margin-right: 40rpx;
			}
		}

		.content-main {
			width: 750rpx;
			background: rgba(255, 255, 255, 1);
			margin-top: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.payment-header {
				display: flex;
				justify-content: space-between;

				.payment-name {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(36, 34, 34, 1);
				}

				.payment-text {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(55, 131, 252, 1);
				}
			}

			.mian-line {
				width: 702rpx;
				height: 0rpx;
				border: 2rpx solid rgba(0, 0, 0, 0.1);
				margin: 40rpx 0rpx;
			}

			.box-main {
				height: calc(100vh - 830rpx);
				overflow-y: scroll;

				.main-box {
					margin-bottom: 20rpx;


					.box-name {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(2, 14, 36, 1);
					}

					.box {
						display: flex;
						justify-content: space-between;

						.box-text {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba(145, 146, 148, 1);
							margin-top: 10rpx;
						}

						.box-mon {
							font-size: 32rpx;
							font-weight: 700;
							color: rgba(245, 99, 81, 1);
						}
					}


				}
			}
		}

		.content-payment {
			width: 750rpx;
			background: rgba(255, 255, 255, 1);
			margin-top: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.payment-header {
				display: flex;
				justify-content: space-between;

				.payment-name {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(36, 34, 34, 1);
				}

				.payment-text {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(55, 131, 252, 1);
				}
			}

			.payment-box {
				width: 100%;
				margin-top: 40rpx;

				.box-name {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(2, 14, 36, 1);
					margin-bottom: 10rpx;
				}

				.payment-line {
					width: 700rpx;
					height: 2rpx;
					background: rgba(240, 240, 240, 1);
					margin: 20rpx auto;
				}
			}
		}

		.main-footer {
			position: fixed;
			bottom: 80rpx;
			left: 30rpx;
			width: 702rpx;
		}
	}
</style>